<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<!-- 设备出厂设置 -->
		<template v-if="type == 'entry'">
			<view class="body">
				<view class="form-wrap">
					<view class="form-item">
						<view class="label">设备类型</view>
						<view class="form-input">
							<view class="content"><input type="text" class="inp" value="智能瓷盘" disabled /></view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">设备名称</view>
						<view class="form-input">
							<view class="content"><input type="text" class="inp" v-model="number" placeholder="输入设备名称" disabled /></view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">设备编号</view>
						<view class="form-input">
							<view class="content"><input type="text" class="inp" v-model="entryParams.device_number" placeholder="输入设备编号" /></view>
						</view>
					</view>
					<view class="form-item">
						<view class="label">物联网卡号</view>
						<view class="form-input">
							<view class="content"><input type="text" class="inp" v-model="entryParams.ccid" placeholder="输入物联网卡号" /></view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="submit-btn" @click="submitDevInfo">提交出厂信息</view>
				</view>
			</view>
		</template>

		<!-- 设备安装 -->
		<template v-if="type == 'install'">
			<view class="body">
				<!-- :show-location="true" -->
				<view class="map-area" style="margin-bottom: 0;">
					<map id="map" ref="map" :markers="markers" style="width: 100%;"></map>
				</view>
				<view class="data-list">
					<view class="item">
						<view class="label">天气情况</view>
						<text class="val">{{installParams.weather===''?'--':installParams.weather}}</text>
					</view>
					<view class="item">
						<view class="label">空气温度(°C)</view>
						<text class="val">{{installParams.temperature===''?'--':installParams.temperature}}</text>
					</view>
					<view class="item">
						<view class="label">空气湿度(%)</view>
						<text class="val">{{installParams.humidity===''?'--':installParams.humidity}}</text>
					</view>
					<view class="item">
						<view class="label">海拔</view>
						<text class="val">{{installParams.altitude===''?'--':parseFloat(installParams.altitude).toFixed(2)}}</text>
					</view>
				</view>
				<view class="mod-grid">
					<view class="hd">设备信息</view>
					<view class="con">
						<view class="detail-wrap">
							<view class="detail-item">
								<view class="label">设备名称</view>
								<view class="detail-input">
									<view class="content">
										<view class="val split">智能瓷盘设备</view>
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">设备编号</view>
								<view class="detail-input">
									<view class="content"><input v-model="detail.device_number" class="val split" />
									</view>
								</view>
							</view>
							<!-- <view class="detail-item">
								<view class="label">类型田：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="installParams.type_field" disabled placeholder="输入经纬度" />
									</view>
								</view>
							</view> -->
							<view class="detail-item">
								<view class="label">生育期：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="installParams.birth_time" placeholder="输入生育期" />
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">取样丛数：</view>
								<picker class="form-picker" :range="[1,2,3,4,5]" mode="selector" @change="changeQycs">
									<view class="picker">
										<input type="text" v-model="installParams.qycs" disabled class="select-data t-l" placeholder="请选择取样丛数">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="detail-item">
								<view class="label">品种：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="installParams.breed" placeholder="输入品种" />
									</view>
								</view>
							</view>
							<view class="detail-item" v-if="params.location">
								<view class="label">经纬度：</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.location" disabled placeholder="输入经纬度" />
									</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">省 份：</view>
								<picker mode="selector" :range="provinces" range-key="name" class="form-picker" @change="changeProvince">
									<view class="picker">
										<input type="text" v-model="params.province.name" disabled class="select-data t-l" placeholder="请选择省份">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view v-if="params.province.name" class="detail-item">
								<view class="label">城 市：</view>
								<picker mode="selector" :range="citys" range-key="name" class="form-picker" @change="changeCity">
									<view class="picker">
										<input type="text" v-model="params.city.name" disabled class="select-data t-l" placeholder="请选择城市">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view v-if="params.city.name" class="detail-item">
								<view class="label">区/县：</view>
								<picker mode="selector" :range="districts" range-key="name" class="form-picker" @change="changeDistrict">
									<view class="picker">
										<input type="text" v-model="params.district.name" disabled class="select-data t-l" placeholder="请选择区/县">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view v-if="params.district.name" class="detail-item">
								<view class="label">镇/街道：</view>
								<picker class="form-picker" :range="towns" range-key="name" mode="selector" @change="changeTown">
									<view class="picker">
										<input type="text" v-model="params.town.name" disabled class="select-data t-l" placeholder="请选择镇/街道">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view v-if="params.town.name" class="detail-item">
								<view class="label">村/社区：</view>
								<picker class="form-picker" :range="villages" range-key="name" mode="selector" @change="changeVillage">
									<view class="picker">
										<input type="text" v-model="params.village.name" disabled class="select-data t-l" placeholder="选择村/社区">
										<view class="icon">
											<view class="iconfont f-s68">&#xeb8a;</view>
										</view>
									</view>
								</picker>
							</view>
							<view class="detail-item" style="height: auto;align-items: baseline;">
								<view class="label">详细地址：</view>
								<view class="form-input" style="display: flex;" @click="chooseLocation">
									<view class="content" style="font-size: 30rpx;">
										<view :class="['val split-line', { 'input-placeholder': !installParams.address }]">{{ installParams.address || '安装详细地址' }}</view>
									</view>
									<view class="icon">
										<view class="iconfont f-s40 f-blue">&#xe619;</view>
									</view>
								</view>
							</view>
							<view class="detail-item" style="align-items: flex-start;">
								<view class="label">备注:</view>
								<view class="form-input">
									<textarea ref="remark" v-model="installParams.remark" style="width: auto;max-width: 100%;height: 80px;font-size: 30rpx;"></textarea>
									<!-- <view class="content" style="min-height: 200rpx;align-items: stretch;"> -->
									<!-- <view class="inp" >{{install.temperature+'℃'}}</view> -->
									<!-- </view> -->
								</view>
							</view>
							<!-- <view class="detail-item">
									<view class="label">地址坐标</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{installParams.lat}} {{installParams.lng}}</view>
										</view>
									</view>
								</view> -->
						</view>
					</view>
				</view>

				<!-- <view class="mod-grid">
					<view class="hd">其他信息</view>
					<view class="con">
						<view class="form-wrap">
							<view class="form-item">
								<view class="label">业主名称</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" confirm-type="done"
											v-model="installParams.customer" placeholder="输入业主名称"
											@focus="showCacheCustomer('hide')" />
										<view v-if="cacheCustomer.length > 0" class="link"
											@click="showCacheCustomer('show')">历史记录</view>
									</view>
									<view class="cache-list" v-if="isShowCacheCustomer">
										<view class="item" v-for="(item, index) in cacheCustomer" :key="index"
											@click="selectCacheCustomer(item)">{{ item }}</view>
									</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">售后联系</view>
								<view class="form-input">
									<view class="content"><input type="text" class="inp"
											v-model="installParams.worker" placeholder="售后联系人" /></view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">联系电话</view>
								<view class="form-input">
									<view class="content"><input type="text" class="inp"
											v-model="installParams.phone" placeholder="售后联系电话" /></view>
								</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- <view class="mod-grid">
					<view class="hd">上传实景图片</view>
					<view class="form-wrap upload-pic-wrap">
						<template>
							<view class="form-upload-pic">
								<template>
									<view class="img-item" v-for="(item, index) in installParams.pic" :key="index">
										<image src="@/static/images/filter_bg.png" mode="widthFix">
										</image>
										<view class="img-wrap" @click="previewPic(index, 2)">
											<image class="img" :src="item.url" mode="widthFix"></image>
										</view>
										<view class="del-icon" @click="delPic(index, 2)">
											<view class="iconfont">&#xe65c;</view>
										</view>
									</view>
								</template>
								<view v-if="installParams.pic.length < 5" class="img-item add-btn"
									@click="uploadImage(2)">
									<image src="@/static/images/upload_pic.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="upload-pic-tips">设备安装实景图片(最多5张)</view>
						</template>
					</view>
				</view> -->
			</view>
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="submit-btn" @click="submitInstall">提交安装信息</view>
				</view>
			</view>
		</template>

		<!-- 设备详情 -->
		<template v-if="type == 'detail'">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body" style="display: flex;flex-direction: column;">
					<!-- <view class="map-area">
						<map id="map" scale="10" :latitude="detail.gcj02_lat" :longitude="detail.gcj02_lng"
							ref="map" :show-location="true" :markers="markers"
							style="width: 100%;max-height: 100%;"></map>
					</view>
					<view class="data-list">
						<view class="item">
							<view class="label">天气情况</view>
							<text class="val">{{detail.weather===''?'--':detail.weather}}</text>
						</view>
						<view class="item">
							<view class="label">空气温度(°C)</view>
							<text class="val">{{detail.temperature===''?'--':detail.temperature}}</text>
						</view>
						<view class="item">
							<view class="label">空气湿度(%)</view>
							<text class="val">{{detail.humidity===''?'--':detail.humidity}}</text>
						</view>
						<view class="item">
							<view class="label">海拔</view>
							<text class="val">{{detail.altitude===''?'--':parseFloat(detail.altitude).toFixed(2)}}</text>
						</view>
					</view> -->
					<view class="mod-grid m-t2">
						<view class="hd">设备信息</view>
						<view class="con">
							<view class="detail-wrap">
								<view class="detail-item">
									<view class="label">设备编号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.device_number}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">作业人员</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.scan_info[0].scan_user}}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">作业时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.scan_info[0].scan_time}}</view>
										</view>
									</view>
								</view>
								<!-- <view class="detail-item">
										<view class="label">设备类型</view>
										<view class="detail-input">
											<view class="content">
												<view class="val split">{{detail.name||'-'}}</view>
											</view>
										</view>
									</view> -->
								<!-- <view class="detail-item">
									<view class="label">设备型号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.model_number || '-' }}</view>
										</view>
									</view>
								</view> -->
								<!-- <view class="detail-item">
									<view class="label">地址</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.address || '-' }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">备注</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.remark || '-' }}</view>
										</view>
									</view>
								</view> -->
							</view>
						</view>
					</view>
					<!-- <view class="mod-grid">
						<view class="hd">其他信息</view>
						<view class="con">
							<view class="detail-wrap">
								<view class="detail-item">
									<view class="label">作业人员</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.realname || '' }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">作业时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val split">{{ detail.addtime || '' }}</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view> -->
					<view class="mod-grid">
						<view class="hd">图片数据</view>
						<view class="con">

							<view class="list-wrap" v-if="photos.list.length>0">
								<view class="item" v-for="(item,index) in photos.list" :key="index" @click="goDataDetail(item)">
									<view class="pic">
										<image :src="'http://test3.agri120.org/image/compress.html?from=zncp&path='+item.photo_path" mode="widthFix"></image>
									</view>
									<view class="info">
										<view class="infos">
											<view class="name">{{item.photo_date}}</view>
											<view class="pestInfo">
												作业人员：<text>{{item.toufang_users}}</text>
											</view>
										</view>
										<!-- <view v-else class="pestInfo">未识别到工蚁</view> -->
										<view class="preview-btn">
											<view @click.stop="beforeDelPhoto(item.id)" class="del m-r2">删除图片</view>
											<view @click.stop="previewPic(item.photo_path)" class="preview">查看大图</view>
										</view>
									</view>
								</view>
								<loading :loadingState="moreloading"></loading>
							</view>
							<view style="background-color: #fff;" v-else>
								<empty msg="暂无数据"></empty>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="fix-wrap bottom">
							<view class="submit-btn" @click="startWork">开始作业</view>
						</view>
					</view>
				</view>
			</template>
		</template>

		<!-- 旧设备无详情 -->
		<template v-if="type == '404'">
			<empty msg="设备暂无详情信息"></empty>
		</template>

		<!-- 弹窗 -->
		<view v-if="popupFlag.isFullPage" class="full-fix-page">
			<!-- 填写设备型号 -->
			<view v-if="popupFlag.isDevNumber" class="popup-wrap a-fadein">
				<view class="popup-type-model ">
					<view class="popup-body devnumber-area">
						<view class="close-btn iconfont" @click="showPopup('hide')">&#xe65b;</view>
						<view class="title">设备型号</view>
						<view class="devnumber-inp-bar"><input type="text" v-model="devNumber.select"
								placeholder="输入设备型号" @focus="clearDevNumber" /></view>
						<picker mode="selector" :range="devNumber.data" range-key="name" @change="changeDevNumber">
							<view class="select-btn">已有型号中选择</view>
						</picker>
						<view class="confirm-btn" @click="confirmDevNumber">确定</view>
					</view>
				</view>
			</view>

			<!-- 设备类型切换 -->
			<view v-if="ssss.isChangeType" class="picker-bottom-wrap">
				<view class="hd">
					<view class="cancle" @click="showPopup('hide')">取消</view>
					<view class="confirm" @click="comfirmType">确定</view>
				</view>
				<picker-view indicator-class="indicatorClass" class="picker-view-wrap row-2" :value="changeType"
					@change="changeDevType">
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in devType.data" :key="index">{{ item.name }}</view>
					</picker-view-column>
					<picker-view-column class="item-column">
						<view class="item" v-for="(item, index) in devType.sub" :key="index">{{ item.name }}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import loading from '@/components/loading-more.vue';
	import empty from '@/components/empty.vue';
	import {
		uploadImage,
		previewImage,
		encodeToString,
		checkPhone,
		d2Dms
	} from '@/common/util.js';
	import {
		map_key,
		gaode_key
	} from '@/config.js';
	import QQMapWX from '@/common/map/qqmap-wx-jssdk.min.js';
	import permision from '@/common/permission.js';
	export default {
		name: 'name',
		data() {
			return {
				type: '',
				devState: '',
				isIphoneX: getApp().globalData.isIphoneX,
				loginStateUpdate: false,
				token: uni.getStorageSync('token'),
				appid: getApp().globalData.appid,
				isLogin: false,
				isStop: true,
				popupFlag: {
					isFullPage: false,
					isDevNumber: false,
					isChangeType: false
				},
				entryParams: {
					device_number: '',
					ccid: ''
				},
				installParams: {
					device_id: '', //设备ID
					device_number: '', //设备编号
					province: '', //省行政代码
					city: '', //市行政代码
					district: '', //区行政代码
					town: '', //镇行政代码
					village: '', //村行政代码
					address: '', //详细地址
					gcj02_lng: '', //经度
					gcj02_lat: '', //纬度
					remark: '', //备注
					weather: '', //天气
					temperature: '', //温度
					humidity: '', //湿度
					altitude: '', //海拔
					token: '',
					appid: '',
					type_field: '', //（类型田）
					birth_time: '', //（生育期）、
					breed: '', //（品种）
					qycs: '' //（取样丛数，1-5、选择）
				},
				isShowCacheCustomer: false,
				cacheCustomer: uni.getStorageSync('customers'),
				devType: {
					select: '',
					data: [],
					sub: []
				},
				changeType: [0, 0],
				company: ['广州瑞丰生物科技有限公司', '广州瑞丰智能科技有限公司'],
				date: '',
				markers: [],
				devNumber: {
					select: '',
					data: []
				},
				userInfo: uni.getStorageSync('userInfo'),
				number: '',
				detail: {},
				files: [],
				pageCode: Date.parse(new Date()),
				loadingState: {
					default: true
				},
				image_path: getApp().globalData.image_path,
				addressDetail: '',
				isScan: false,
				//选择区域
				provinces: [],
				citys: [],
				districts: [],
				towns: [],
				villages: [],
				params: {
					province: {},
					city: {},
					district: {},
					town: {},
					village: {},
					location: ''
				},
				photo_params: {
					page: 1,
					limit: 10,
					device_id: '',
					appid: '',
					token: '',
					user_id: ''
				},
				photos: {
					total: 0,
					list: []
				},
				moreloading: { loading: false, completed: false }
			};
		},
		async onLoad(params) {
			console.log('params', params);
			if (params.q) {
				this.number = encodeToString(params.q)
					.split('?')[1]
					.split('=')[1]; // 微信扫码进入
			} else {
				this.number = params.number || ''; // 小程序扫码/页面进入  二维码编号
				this.isScan = params.isScan || false;
			}

			// setTimeout(() => {
			// 	uni.redirectTo({
			// 		url: '../../package_common/list/list?changetype=12-0&dev_name=智能瓷盘&dev_type=20&typeid=33',
			// 		fail(e) {
			// 			console.log(e);
			// 		}
			// 	})
			// }, 1000)


			await this.checkDevState(); // 检测设备状态
		},
		onReachBottom() {
			if (this.type == 'detail' && this.photos.list.length < this.photos.total) {
				this.photo_params.page++;
				this.getPhotos();
			}
		},
		async onShow() {},
		//点击返回键  解决APP扫一扫进入 不能返回问题
		onBackPress() {
			// // #ifdef APP-PLUS
			// if (this.type == 'entry') || this.isScan) {
			// 	console.log('返回index');
			// 	uni.switchTab({
			// 		url: '/pages/index/index',
			// 		success() {
			// 			console.log('扫一扫后退回首页');
			// 		},
			// 		fail(err) {
			// 			console.log('err', err);
			// 		}
			// 	});
			// 	//true表示自行处理返回逻辑  false默认
			// 	return true;
			// }
			// return false;
			// // #endif
		},

		methods: {

			changeQycs(e) {
				this.installParams.qycs = +e.detail.value + 1;
			},

			async initArea() {
				this.provinces = await this.getArea('china', 'china');
				if (this.params.province != null) {
					this.citys = await this.getArea(this.params.province.level, this.params.province.adcode);
				}
				if (this.params.city != null) {
					this.districts = await this.getArea(this.params.city.level, this.params.city.adcode);
				}
				if (this.params.district != null) {
					this.towns = await this.getArea('town', this.params.district.adcode);
				}
				if (this.params.town != null) {
					this.villages = await this.getArea('village', this.params.town.adcode);
				}
			},

			// getFouce(){
			// 	console.log(this.$refs);
			// 	this.$refs.remark.fouce();
			// },
			// 获取下级区域列表
			getArea: async function(areaName, adcode) {
				let res = {};
				if (areaName == 'town' || areaName == 'village') {
					res = await this.$api.zncp_api.getStreet({
						areaName: areaName,
						adcode: adcode
					})
				} else {
					res = await this.$api.zncp_api.getProvince({
						areaName: areaName,
						adcode: adcode
					})
				}
				if (res.data.ret == 0) {
					return res.data.data;
				}
			},

			// 选择省份
			changeProvince: async function(e) {

				let idx = e.detail.value;
				let data = this.provinces[idx];
				this.params.province = data;
				this.params.city.name = '';
				this.params.district.name = '';
				this.params.town.name = '';
				this.params.village.name = '';
				this.params.city.adcode = '';
				this.params.district.adcode = '';
				this.params.town.adcode = '';
				this.params.village.adcode = '';
				this.citys = [];
				this.districts = [];
				this.towns = [];
				this.villages = [];
				this.citys = await this.getArea(data.level, data.adcode)
			},

			// 选择城市
			changeCity: async function(e) {
				console.log(e, '---');
				let idx = e.detail.value;
				let data = this.citys[idx];
				console.log(e, data);
				this.params.city = data;
				this.params.district.name = '';
				this.params.town.name = '';
				this.params.village.name = '';
				this.params.district.adcode = '';
				this.params.town.adcode = '';
				this.params.village.adcode = '';
				this.districts = [];
				this.towns = [];
				this.villages = [];
				this.districts = await this.getArea(data.level, data.adcode)
			},

			// 选择区
			changeDistrict: async function(e) {
				let idx = e.detail.value;
				let data = this.districts[idx];
				this.params.district = data;
				this.params.town.name = '';
				this.params.village.name = '';
				this.params.town.adcode = '';
				this.params.village.adcode = '';
				this.towns = [];
				this.villages = [];
				this.towns = await this.getArea('town', data.adcode)
			},

			// 选择镇/街道
			changeTown: async function(e) {
				let idx = e.detail.value;
				let data = this.towns[idx];
				this.params.town = data;
				this.params.village.name = '';
				this.params.village.adcode = '';
				this.villages = await this.getArea('village', data.adcode)
			},

			// 选择镇/街道
			changeVillage: async function(e) {
				let idx = e.detail.value;
				let data = this.villages[idx];
				this.params.village = data;
			},

			// 检测设置状态  1002 未出厂  1000 已出厂 未安装  1001 已安装
			checkDevState: async function() {
				let type = '';
				let res = await this.$api.zncp_api.scan({
					appid: this.appid,
					token: this.token,
					number: this.number,
				}).finally(() => this.loadingState.default = false);
				console.log('scan', res);
				if (res.data.ret == 1) {
					this.type = 'entry';
					uni.setNavigationBarTitle({
						title: '设备出厂设置'
					})
				} else if (res.data.ret == 0) {
					if (res.data.data.scan_info.length == 0) {
						this.detail = res.data.data;
						this.startWork();
						return
					} else {
						this.type = 'detail';
						this.detail = res.data.data;

						this.getPhotos();
						uni.setNavigationBarTitle({
							title: '设备详情'
						})
					}
					// uni.showActionSheet({
					// 	itemList: ['查看数据', '开始作业'],
					// 	success: (sheet_res) => {
					// 		if (sheet_res.tapIndex == 0) {
					// 			this.type = 'detail';
					// 			this.detail = res.data.data;

					// 			this.getPhotos();
					// 			uni.setNavigationBarTitle({
					// 				title: '设备详情'
					// 			})

					// 		}
					// 		if (sheet_res.tapIndex == 1) {
					// 			this.type = 'install';
					// 			this.detail = res.data.data;
					// 			uni.setNavigationBarTitle({
					// 				title: '设备投放'
					// 			})
					// 			// this.getCities();
					// 			this.initArea();
					// 			this.getLocation();
					// 		}
					// 	},
					// 	fail(err) {
					// 		console.log(err, 'err');
					// 	}
					// })
				}
			},

			startWork() {
				this.type = 'install';
				uni.setNavigationBarTitle({
					title: '设备投放'
				})
				// this.getCities();
				this.initArea();
				this.getLocation();
			},

			// 出厂设置 - 提交信息
			submitDevInfo: function() {
				let _this = this;
				if (this.entryParams.device_number == '') {
					return uni.showToast({
						icon: 'none',
						title: '请输入设备编号'
					});
				} else if (this.entryParams.ccid == '') {
					return uni.showToast({
						icon: 'none',
						title: '请输入物联网卡号'
					});
				}

				uni.showModal({
					content: '设备出厂信息录入完成，确认出厂吗？',
					confirmText: '确认',
					cancelText: '取消',
					async success(res) {
						if (res.confirm) {
							_this.addDev();
						}
					}
				});
			},

			async addDev() {
				console.log(2222, {
					number: this.number, //设备二维码编号
					device_number: this.entryParams.device_number, //设备编号
					ccid: this.entryParams.ccid, //设备物联网卡号
					uid: this.userInfo.uid, //可传空，也可以不传
				});
				let _this = this;
				let res = await this.$api.zncp_api.addDev({
					appid: this.appid,
					token: this.token,
					number: this.number, //设备二维码编号
					device_number: this.entryParams.device_number, //设备编号
					ccid: this.entryParams.ccid, //设备物联网卡号
					uid: this.userInfo.uid, //可传空，也可以不传
				}).catch(err => console.log(err));
				console.log('添加设备', res);
				if (res.data.ret == 0) {
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						mask: true,
						duration: 1000,
						success: r => {
							setTimeout(() => {
								uni.switchTab({
									url: '../../pages/index/index',
									fail(e) {
										console.log(e);
									}
								})
							}, 300)
						}
					})
				} else {
					uni.showToast({
						icon: 'error',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
				}

			},


			///////////////////安装设备///////////////////////////////

			// 安装设备 - 获取当前地址
			getLocation: function() {
				let _this = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					async success(localRes) {
						console.log('getLocation', localRes);

						let lng = d2Dms(parseFloat(localRes.longitude).toFixed(6)); // d2Dms方法 转为度分秒格式
						let lat = d2Dms(parseFloat(localRes.latitude).toFixed(6)); // d2Dms方法 转为度分秒格式
						_this.params.location = lat + '，' + lng;
						_this.installParams.altitude = localRes.altitude;

						_this.reverseGeocoder(localRes);

						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(localRes.latitude),
							longitude: parseFloat(localRes.longitude)
						});
						let marker = {
							id: 0,
							latitude: parseFloat(localRes.latitude),
							longitude: parseFloat(localRes.longitude),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						_this.markers = [marker];

					},
					fail(err) {
						console.log('err: ', err);
						if (err.errMsg == 'getLocation:fail auth deny') {
							uni.showModal({
								title: '温馨提示',
								content: '检测到您未开启位置信息权限,是否开启。',
								confirmText: '去设置',
								success(res) {
									if (res.confirm) {
										uni.openSetting();
									}
								}
							});
						} else {
							uni.showModal({
								title: '温馨提示',
								content: err.errMsg,
								success(res) {
									if (res.confirm) {
										// uni.openSetting();
									}
								}
							});
						}
					}
				});
			},

			//获取天气信息
			getWeatherInfo: async function(adcode) {
				let res = await this.$api.zncp_api.getWeather({
					key: gaode_key,
					city: adcode
				})
				if (res != false && res.data.info == "OK") {
					if (res.data.lives.length > 0) {
						console.log(123, res.data.lives[0]);
						this.installParams.weather = res.data.lives[0].weather;
						this.installParams.temperature = res.data.lives[0].temperature;
						this.installParams.humidity = res.data.lives[0].humidity;
					}
				}

			},

			//判断是否开启位置权限
			checkLocationPermission() {
				// #ifdef APP-PLUS
				uni.$on('updateArea', data => {
					console.log('on:area', data);
					this.installParams.area = data.area;
					this.installParams.area_id = data.code;
				});
				this.requestLocationPermission();
				// #endif

				// #ifndef APP-PLUS
				this.getLocation();
				// #endif
			},

			// 安装设备 - 选择地址
			changeAddress: async function() {
				// #ifndef APP-PLUS
				this.chooseLocation();
				// #endif

				// #ifdef APP-PLUS
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION');
				console.log("检测是否开启授权result=1开启", result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.chooseLocation();
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '检测到您未开启位置信息权限,是否开启。',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting();
							}
						}
					});
				}
				// #endif
			},

			chooseLocation() {
				let _this = this;
				uni.chooseLocation({
					success(res) {
						console.log('选择地址 ', res);
						// parseFloat(114.264699)+","+parseFloat(23.753034)
						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(res.latitude),
							longitude: parseFloat(res.longitude)
						});
						let marker = {
							id: 0,
							latitude: parseFloat(res.latitude),
							longitude: parseFloat(res.longitude),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						_this.markers = [marker];
						// _this.markers.push(marker);
						// _this.installParams.altitude = res.altitude;
						// _this.installParams.address = res.address;
						// _this.installParams.lat = res.latitude;
						// _this.installParams.lng = res.longitude;

						_this.reverseGeocoder({
							latitude: res.latitude,
							longitude: res.longitude
						});
					},
					fail(err) {
						console.log('err', err);
					}
				});
			},

			// 安装设备 - 提交信息
			submitInstall: function() {
				let _this = this;
				if (!this.params.province.name) {
					return uni.showToast({
						icon: 'none',
						title: '请选择省'
					});
				} else if (!this.params.city.name) {
					return uni.showToast({
						icon: 'none',
						title: '请选择市'
					});
				} else if (!this.params.district.name) {
					return uni.showToast({
						icon: 'none',
						title: '请选择区/县'
					});
				} else {
					let { province, city, district, town, village } = this.params;
					Object.assign(this.installParams, {
						province: province.adcode,
						city: city.adcode,
						district: district.adcode,
						town: town.adcode,
						village: village.adcode,
						device_id: this.detail.id,
						device_number: this.detail.device_number,
						token: this.token,
						appid: this.appid,
						user_id: this.userInfo.uid
					})
					// let picList = _this.installParams.pic.filter(it => !it.isUpload);
					// _this.isStop = false;
					// console.log('设备安装图片', _this.installParams.pic, picList);
					// _this.uploadData(0, 2, picList);
					this.installDev();
				}
			},

			async installDev(params) {
				let _this = this;
				if (this.isStop) {
					this.isStop = false;
					let res = await this.$api.zncp_api.add_device_work(this.installParams).catch(err => console.log(err)).finally(() => this.isStop = true);
					console.log(res);
					if (res.data.ret == 0) {
						uni.showToast({
							icon: 'success',
							title: res.data.message,
							mask: true,
							duration: 1000,
							success() {
								setTimeout(() => {
									uni.redirectTo({
										url: '../../package_common/list/list?changetype=12-0&dev_name=智能瓷盘&dev_type=20&typeid=33',
									})
								}, 300)
							}
						})
					} else {
						uni.showToast({
							icon: 'error',
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 1000,
						})
					}

				}
			},

			// 上传数据
			uploadData: async function(index, type, picList) {
				// type 1 出厂  2 安装
				let end = '';
				let length = 0;
				let _this = this;

				if (type == 1) {
					length = this.entryParams.pic.length;
					if (index == length - 1) {
						end = 0;
					} else {
						end = -1;
					}
					let res = await this.$api.tool_api.deviceEntry({
						filePath: this.entryParams.pic[index],
						name: 'photo',
						formData: {
							number: _this.number,
							name: _this.entryParams.devName,
							type: _this.entryParams.devType,
							dev_number: _this.entryParams.devCode,
							model_number: _this.entryParams.devNum,
							quality_testing: _this.entryParams.devQuality,
							manufacturers: _this.entryParams.devCompany,
							inspector_uid: _this.userInfo.uid,
							inspector: _this.entryParams.devCheckUser,
							production_date: _this.entryParams.devDate,
							appid: _this.appid,
							token: _this.token,
							end: end,
							pageCode: this.pageCode,
							typeid: this.entryParams.typeid
						}
					});
					uni.showLoading({
						title: '出厂信息提交中...'
					});
					if (res.data) {
						res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json

						if (res.data.ret == 1000) {
							if (index < length - 1) {
								setTimeout(() => {
									index++;
									_this.uploadData(index, 1);
								}, 1500);
							} else if (index == length - 1) {
								setTimeout(() => {
									uni.hideLoading();
									_this.isStop = true;
									uni.setStorage({
										key: 'entryParams',
										data: {
											devType: this.devType.select,
											devName: this.entryParams.devName,
											devNum: this.entryParams.devNum,
											devCode: this.entryParams.devCode,
											devDate: this.entryParams.devDate,
											quality_testing: this.entryParams.devQuality,
											devCheckUser: this.entryParams.devCheckUser,
											devCompany: this.entryParams.devCompany,
											typeId: this.entryParams.typeid,
											type: this.entryParams.devType
										}
									});
									uni.showModal({
										content: '设备出厂信息设置完成，是否现在安装',
										confirmText: '立即安装',
										cancelText: '暂不安装',
										success(m_res) {
											if (m_res.confirm) {
												uni.redirectTo({
													url: '/package_common/detail/detail?number=' +
														_this.number + '&isScan=' + _this
														.isScan
												});
											} else if (m_res.cancel) {
												uni.switchTab({
													url: '/pages/home/home'
												});
											}
										}
									});
								}, 1500);
							}
						}
					} else {
						uni.showToast({
							title: res.data.message,
							mask: true,
							success() {
								_this.isStop = true;
							}
						});
					}
				} else if (type == 2) {
					console.log(`设备安装图片${index}`, `dev_number`, this.number);
					length = picList.length; //this.installParams.pic.length;
					if (index == length - 1 || picList.length == 0) {
						end = 0;
					} else {
						end = -1;
					}

					let res = await this.$api.tool_api.deviceInstall({
						filePath: picList[index]?.url,
						name: 'photo',
						formData: {
							dev_number: this.number,
							gcj02_lat: parseFloat(this.installParams.lat),
							gcj02_lng: parseFloat(this.installParams.lng),
							p_province_id: this.installParams.p_province_id,
							p_city_id: this.installParams.p_city_id,
							area_id: this.installParams.area_id,
							address: this.installParams.address,
							create_uid: this.userInfo.uid,
							pageCode: this.pageCode, //提交识别码,
							owner: this.installParams.customer,
							upkeep_name: this.installParams.worker,
							upkeep_phone: this.installParams.phone,
							end: end,
							appid: this.appid,
							token: this.token
						}
					});
					console.log('安装', res);

					uni.showLoading({
						title: '安装信息提交中...'
					});
					if (res.data) {
						if (picList.length) {
							res.data = JSON.parse(res.data); // uploadFile 返回data为string，转换成json
						}
						console.log(`上传图片下标index${index},图片数${length}`);
						if (res.data.ret == 1000) {
							if (index < length - 1) {
								setTimeout(() => {
									index++;
									_this.uploadData(index, 2, picList);
								}, 1500);
							} else {
								// if (index == length - 1)
								setTimeout(() => {
									uni.hideLoading();
									let catchCustomer = uni.getStorageSync('customers') || [];
									if (catchCustomer.indexOf(this.installParams.customer) == -1) {
										if (catchCustomer.length == 5) {
											catchCustomer.splice(4, 1);
											catchCustomer.unshift(this.installParams.customer);
										} else {
											catchCustomer.unshift(this.installParams.customer);
										}
									}
									uni.setStorage({
										key: 'customers',
										data: catchCustomer
									});
									this.$showToast({
										icon: 'success',
										title: '设备安装成功..'
									}).then(() => {
										setTimeout(() => {
											uni.redirectTo({
												url: `/package_common/detail/detail?number=${this.number}&isScan=${this.isScan}`,
												success() {
													uni.hideLoading();
												}
											});
											_this.isStop = true;
										}, 1500);
									});
								}, 1500);
							}
						}
					} else {
						uni.showToast({
							title: res.data.message,
							mask: true,
							success() {
								_this.isStop = true;
							}
						});
					}
				}
			},

			// 上传图片
			uploadImage: function(type) {
				// type 1 出厂 2 安装
				let _this = this;
				if (type == 1) {
					uploadImage({
						length: this.entryParams.pic.length,
						maxSize: 5,
						success(res) {
							_this.entryParams.pic = _this.entryParams.pic.concat(res);
						}
					});
				} else if (type == 2) {
					uploadImage({
						length: this.installParams.pic.length,
						maxSize: 5,
						success(res) {
							// _this.installParams.pic = _this.installParams.pic.concat({ isUpload: false, url: res[0] });
							res.forEach(it => {
								_this.installParams.pic.push({
									isUpload: false,
									url: it
								});
							});
						}
					});
				}
			},

			// 预览图片
			previewPic: function(path) {
				uni.previewImage({
					urls: [`http://test3.agri120.org/image/preview.html?from=zncp&path=${path}`],
					fail(e) {
						console.log(e, 'err');
					}
				});
			},

			beforeDelPhoto(id) {
				uni.showModal({
					title: '提示',
					content: '图片删除后数据不可恢复,是否确定?',
					success: res => {
						if (res.confirm) {
							this.delphoto(id);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},

			async delphoto(id) {
				let res = await this.$api.zncp_api.delphoto({
					id,
					appid: this.appid,
					token: this.token
				})
				if (res.data.ret == 0) {
					this.photos.list = [];
					this.photo_params.page = 1;
					this.photo_params.limit = 10;
					this.getPhotos();
					uni.showToast({
						icon: 'success',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
				} else {
					uni.showToast({
						icon: 'error',
						image: '../../static/images/error.png',
						title: res.data.message,
						mask: true,
						duration: 1000,
					})
				}
				console.log('del', res);
			},

			goDataDetail(data) {},

			// 显示弹窗
			showPopup: function(t, n) {
				if (t == 'show') {
					this.popupFlag.isFullPage = true;
					this.popupFlag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.popupFlag) {
						this.popupFlag[i] = false;
					}
				}
			},

			///////////////////设备详情///////////////////////////////

			// 获取设备详情
			getDevInfo: async function() {
				let res = await this.$api.tool_api.getDevInfo({
					number: this.number,
					appid: this.appid,
					token: this.token
				});
				if (res.data.ret == 1000) {
					this.loadingState.default = false;
					if (res.data.data.gcj02_lat && res.data.data.gcj02_lng) {
						let marker = {
							id: 0,
							latitude: parseFloat(res.data.data.gcj02_lat),
							longitude: parseFloat(res.data.data.gcj02_lng),
							iconPath: '/static/images/local_icon.png',
							width: 30,
							height: 30
						};
						this.markers.push(marker);
						let mapContext = uni.createMapContext('map');
						mapContext.moveToLocation({
							latitude: parseFloat(res.data.data.gcj02_lat),
							longitude: parseFloat(res.data.data.gcj02_lng)
						});

						let _this = this;

						// #ifndef APP-PLUS
						let qqmapsdk = new QQMapWX({
							key: map_key
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.data.data.gcj02_lat,
								longitude: res.data.data.gcj02_lng
							},
							success(res) {
								console.log('地址', res);
								if (res.status === 0) {
									_this.addressDetail =
										`${res.result.address}(${res.result.formatted_addresses.recommend})`;
								}
							}
						});
						// #endif

						// #ifdef APP-PLUS
						// parseFloat(114.264699)+","+parseFloat(23.753034)//
						var gd_res = await _this.$api.tool_api.getCityInfo({
							key: gaode_key,
							location: parseFloat(res.data.data.gcj02_lng) + ',' + parseFloat(res.data.data
								.gcj02_lat)
						});
						console.log('app高德坐标解析gd_res.data.status=1成功', gd_res);
						if (gd_res.data.status == 1) {
							let {
								regeocode
							} = gd_res.data;
							_this.addressDetail = regeocode.formatted_address;
						}
						// #endif
						if (this.devState == 1000 || this.type == 'install') {
							this.reverseGeocoder({
								latitude: res.data.data.gcj02_lat,
								longitude: res.data.data.gcj02_lng
							});
						}
					} else {
						this.checkLocationPermission();
					}

					if (res.data.data.owner) {
						this.installParams.customer = res.data.data.owner;
					}

					res.data.data.filelist.forEach(item => {
						this.files.push(this.image_path + item.file_path);
						this.installParams.pic.push({
							isUpload: true,
							url: this.image_path + item.file_path,
							file_path: item.file_path
						});
					});
					this.detail = res.data.data;

					console.log('设备详情', this.detail);
				}
			},

			async getPhotos() {
				this.moreloading.loading = true;
				let params = Object.assign({}, this.photo_params, {
					device_id: this.detail.id,
					appid: this.appid,
					token: this.token,
					user_id: this.userInfo.uid
					// device_number:'b1'
				})
				// if (this.photo_list.length != 0) {
				// 	this.dataloading.loading = true;
				// }
				let res = await this.$api.zncp_api.getDevPhoto(params).finally(() => {
					// this.ske.default = false;
					// this.dataloading.loading = false;
				}).finally(() => {
					this.moreloading.loading = false;
				})
				console.log('res', res);
				if (res.data.ret == 1) {
					this.photos.total = res.data.data.count;
					this.photos.list = this.photos.list.concat(res.data.data.list);
					// this.loadingState.loading = false;
					if (this.photos.list.length >= this.photos.total) {
						this.dataloading.completed = true;
					}
				}
			},

			goDataDetail(data) {
				let params = {
					id: data.id,
					scan_id: data.scan_id,
					photo_path: data.photo_path,
					toufang_users: data.toufang_users,
					photo_date: data.photo_date
				}
				uni.navigateTo({
					url: `/package_zhinengcipan/dataDetail/dataDetail?data=${encodeURIComponent(JSON.stringify(params))}`,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						update: data => {
							if (data.update == 1) {
								console.log('修改');
								this.photos.list = [];
								this.photo_params.page = 1;
								this.getPhotos();
							}
						},
					},
				})
			},

			// 拨打电话
			tellphone: function() {
				if (!this.detail.upkeep_phone && !this.detail.upkeep_name) {
					return;
				}

				let _this = this;
				// #ifndef APP-PLUS
				this.call();
				// #endif

				// #ifdef APP-PLUS
				this.requestPhonePermission();
				// #endif
			},

			call() {
				uni.makePhoneCall({
					phoneNumber: this.detail.upkeep_phone,
					success(res) {
						console.log('拨打电话成功', res);
					},
					fail(err) {
						console.log('--', err);
					}
				});
			},

			// 打开地图
			openMap: function(e) {
				uni.openLocation({
					latitude: parseFloat(this.detail.gcj02_lat),
					longitude: parseFloat(this.detail.gcj02_lng),
					name: this.detail.owner,
					address: this.addressDetail || this.detail.address
				});
			},

			previewImage: function(index) {
				previewImage({
					data: this.files,
					index: index
				});
			},

			//检测APP  定位权限是否授权
			async requestLocationPermission() {
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION');
				console.log("检测是否定位授权result=1开启", result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.getLocation();
				} else {
					setTimeout(() => {
						uni.showModal({
							title: '温馨提示',
							content: '检测到您未开启位置信息权限,将无法定位当前位置,是否开启。',
							confirmText: '去设置',
							success(res) {
								if (res.confirm) {
									permision.gotoAppPermissionSetting();
								}
							}
						});
					}, 1000);
				}
			},

			//检测APP  定位权限是否授权
			async requestPhonePermission() {
				let _this = this;
				var result = await permision.requestAndroidPermission('android.permission.CALL_PHONE');
				console.log(result);
				var strStatus;
				if (result == 1) {
					strStatus = '已获得授权';
					this.call();
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '检测到您未开启拨打电话权限,是否开启。',
						confirmText: '去设置',
						success(res) {
							if (res.confirm) {
								permision.gotoAppPermissionSetting();
							}
						}
					});
				}
			},

			//经纬度解析
			async reverseGeocoder(localRes) {
				let _this = this;
				// #ifndef APP-PLUS
				let qqmapsdk = new QQMapWX({
					key: map_key
				});
				// 114.254898,23.727873,
				// 114.264699，23.753034
				qqmapsdk.reverseGeocoder({
					location: {
						latitude: parseFloat(localRes.latitude),
						longitude: parseFloat(localRes.longitude)
					},
					success: function(res) {
						console.log('小程序坐标解析res', res);
						let {
							address_component: info
						} = res.result;
						// _this.installParams.area = res.result.address_component.province + ' ' + res.result
						// 	.address_component.city + ' ' + res.result.address_component.district;
						//`${info.province}${info.city}${info.district}${info.street_number}`; //res.result.address;
						// _this.installParams.area_id = res.result.ad_info.adcode;
						_this.installParams.address = `${res.result.address}(${res.result.formatted_addresses.recommend})`
						_this.installParams.gcj02_lat = res.result.location.lat;
						_this.installParams.gcj02_lng = res.result.location.lng;
						_this.getWeatherInfo(res.result.ad_info.adcode);
					}
				});
				// #endif

				// #ifdef APP-PLUS
				// parseFloat(114.264699)+","+parseFloat(23.753034)//
				var res = await _this.$api.tool_api.getCityInfo({
					key: gaode_key,
					location: parseFloat(localRes.longitude) + ',' + parseFloat(localRes.latitude)
				});
				console.log('app坐标解析res.data.status=1成功', res);
				if (res.data.status == 1) {
					let { regeocode } = res.data;
					_this.installParams.area = regeocode.addressComponent.province + ' ' + regeocode.addressComponent.city + ' ' + regeocode.addressComponent.district;
					_this.installParams.address = regeocode.formatted_address;
					_this.installParams.area_id = regeocode.addressComponent.adcode;
					_this.installParams.lat = regeocode.addressComponent.streetNumber.location.split(',')[1];
					_this.installParams.lng = regeocode.addressComponent.streetNumber.location.split(',')[0];
					_this.getWeatherInfo(res.data.regeocode.addressComponent.adcode);
				}
				// #endif

			},

		},
		components: {
			loading,
			empty
		},
		computed: {},
		watch: {}
	};
</script>

<style lang="less">
	.data-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		background: #fff;
		margin: 0 auto 20rpx;
		padding: 20rpx 0;
		border-top: 1rpx dashed #ddd;

		.item {
			width: 22%;
			font-size: 28rpx;
			text-align: center;

			.label {
				margin-bottom: 10rpx;
				color: #999;
			}
		}
	}

	.map-area {
		height: 400rpx;
		margin-bottom: 20rpx;
		background: #ccc;

		#map {
			width: 100%;
			height: 100%;
			max-height: 100%;
		}

		map {
			height: 100%;
			max-height: 100%;
		}
	}

	.mod-grid {
		margin-bottom: 20rpx;

		.hd {
			padding: 0 20rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
	}

	.map-btn {
		margin-right: 8rpx;
		flex-shrink: 0;

		.icon {
			width: 60rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 0 auto;
		}

		.text {
			font-size: 28rpx;
			color: #0085ff;
		}
	}

	.btn-wrap {
		display: flex;

		.btn {
			flex-grow: 1;
			height: 60rpx;
			line-height: 60rpx;
			margin-top: 20rpx;
			border-right: 2rpx solid #eee;
			text-align: center;
			font-size: 30rpx;

			&:last-child {
				border-right: 0 none;
			}
		}
	}

	.img-wrap {}

	.form-wrap {
		margin-top: 20rpx;

	}

	.detail-item .label {
		width: 25%;
	}

	.title {
		margin: 20rpx;
		font-size: 28rpx;
	}

	.submit-btn {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #0085ff;
		color: #fff;
		font-size: 30rpx;
	}

	.form-upload-pic {
		margin: 20rpx 0 0 20rpx;
	}

	.upload-pic-tips {
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.upload-pic-wrap {
		padding-top: 10rpx;
		background: #fff;
		border-bottom: 2rpx solid #eee;
	}

	.devnumber-area {
		.close-btn {
			position: absolute;
			right: 0;
			top: 0;
			width: 80rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 46rpx;
		}

		.select-btn {
			text-align: right;
			font-size: 28rpx;
			color: #09f;
		}

		.confirm-btn {
			width: 98%;
			margin: 20rpx auto;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			background: #09f;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.devnumber-inp-bar {
		padding: 20rpx 0;

		input {
			width: 90%;
			height: 70rpx;
			padding: 0 20rpx;
			margin: 0 auto;
			line-height: 70rpx;
			border: 2rpx solid #ddd;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
	}

	.list-wrap {
		.item {
			display: flex;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1rpx dotted #eee;
			background: #fff;

			.pic {
				display: flex;
				justify-content: center;
				width: 30%;
				max-height: 200rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.info {
				flex-grow: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					margin-bottom: 10rpx;
					font-size: 30rpx;
				}

				.pestInfo {
					display: flex;
					margin-bottom: 30rpx;
					font-size: 28rpx;
					color: #666;
				}

				.preview-btn {
					display: flex;
					justify-content: flex-end;

					.preview,
					.del {
						width: 140rpx;
						font-size: 30rpx;
						border-radius: 8rpx;
						color: #fff;
						text-align: center;
					}

					.preview {
						background: #f00;
					}

					.del {
						background: #09f;
					}
				}

			}
		}
	}
</style>